import React from 'react';
import { View, Text, StyleSheet, Touchable,Image,Platform} from 'react-native';
import navigationhelper from 'src/components/navigationhelper'
import {CalendarList, LocaleConfig} from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX,deviceWidth} from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import Modal from 'react-native-modal'
import { deviceHeight,titleHeight} from '../../../util';
import { Flex } from '@ant-design/react-native';


export default class ShareAlertView extends React.Component {

    constructor(props) {
      super(props);
      this.state={
        isVisible:false,
      }
    }

    showOrDismiss = (flag) => {
        this.setState({isVisible: flag});
    }

    componentDidMount=()=>{
      this.state.isVisible = this.props.isVisible;
    }

    render(){
    
        return(
          <Modal isVisible={this.state.isVisible}
                    animationInTiming={400}
                    animationOutTiming={100}
                    swipeDirection="up"
                //    animationIn={'zoomInUp'} //zoomInDown,zoomInUp,slideInLeft
                       animationOut={'slideOutDown'}
                       backdropOpacity={0.2}
                       style={{
                           justifyContent: 'flex-start',
                       }}
                       onBackdropPress={() => {
                          this.showOrDismiss(false); 
                   }}>

             <View style={{flexDirection:'row',position:'absolute',right:-18,backgroundColor:'#fff',bottom:-20,height:titleHeight+30,borderTopLeftRadius:10,borderTopRightRadius:10,width:deviceWidth}}>
             <Flex style={{paddingLeft:30}} justify='center' align='center' direction='column' onPress={()=>{
                 this.props.shareToFriend()
             }}>

             <Image resizeMode='stretch' style={styles.imageOne} source={require('src/assets/shareToFriend.png')}></Image>
             <Text style={styles.TextSty}>微信</Text>
             </Flex>

             <Flex style={{marginLeft:50}} justify='center' align='center' direction='column' onPress={()=>{
                 this.props.shareToTimeline()
             }}>
             <Image resizeMode='stretch' style={styles.image} source={require('src/assets/shareToTimeline.png')}></Image>
             <Text style={styles.TextSty}>朋友圈</Text>
             </Flex>
             </View>  
           </Modal>
       
        ) 
    }
 }

 const styles = StyleSheet.create({
    imageOne: {
       width:43,
       height:36,
    },
    image: {
        width:40,
        height:40,
 
     },
    TextPosition:{
        marginTop:10,
        marginLeft:15,
        fontSize:15
    },
    cellView:{
        height:80,
        width:deviceWidth,
        paddingLeft:20,
        paddingRight:30
    },
    TextSty:{
        color:'#8E8E93',
        fontSize:14,
        marginTop:10
    }
  
})